<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch"
             label-width="68px" style="display: flex; justify-content: flex-end;">
      <el-form-item label="房间类型" prop="roomType">
        <el-input
          v-model="queryParams.roomType"
          placeholder=""
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="房间状态" prop="roomStatus">
        <el-input
          v-model="queryParams.roomStatus"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="5">
      <el-divider content-position="left">房间信息-<span style="color: #999; font-size: 10px;">点击查看详情</span></el-divider>
    </el-row>
    <div>
<!--      <div class="card-container">-->
<!--        <div v-for="(item, index) in roomList" :key="index" :class="{-->
<!--      'card': true,-->
<!--      'flipped': item.flipped-->
<!--    }" @click="flipCard(index)">-->
<!--          <div class="front">-->
<!--            <h2>公寓: {{ item.apartmentName }}</h2>-->
<!--            <br />-->
<!--            <h2>房间: {{ item.roomCode }}</h2>-->
<!--            <br />-->
<!--            <h2>入住状态: {{ item.roomStatus }}</h2>-->
<!--          </div>-->
<!--          <div class="back">-->
<!--            <h2>房间: {{ item.roomCode }}</h2>-->
<!--            <ul v-for="(rel, key) in item.elder" :key="key">-->
<!--              <span>{{ rel.bedCode }}: {{ rel.elderName }}</span>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <el-col
        class="card-container"
        v-for="(item, index) in roomList"
        :key="item.roomId"
        :span="3"
        :offset="0"
      >
        <div class="card" :style="{ backgroundColor: '#6bdae0', background: 'linear-gradient(to right, #795cff, #b07bff)' }">
          <el-card :body-style="{ padding: '1px' }" shadow="hover" >
            <div class="card-content">
              <div class="bed-info">
<!--                <el-tooltip placement="top">-->
<!--                  <div slot="content" class="bed-info-content">-->
<!--                    <ul v-for="(rel, key) in item.elder" :key="key">-->
<!--                      <span>{{ rel.bedCode }}: {{ rel.elderName }}</span>-->
<!--                    </ul>-->
<!--                  </div>-->
                  <el-popover placement="right" width="400" trigger="click">
                    <el-table :data="item.elder">
                      <el-table-column width="95" property="roomCode" label="房间号"></el-table-column>
                      <el-table-column width="99" property="bedCode" label="床位号"></el-table-column>
                      <el-table-column width="100" property="elderName" label="居住人">
                      </el-table-column>
                      <el-table-column width="80" property="bedStatus" label="状态">
                        <template slot-scope="scope">
                          <el-tag size="mini" :type="scope.row.bedStatus === '空闲' ? 'success' : 'danger'">{{ scope.row.bedStatus }}</el-tag>
                        </template>
                      </el-table-column>
                    </el-table>
<!--                    <el-button slot="reference">click 激活</el-button>-->
                    <div class="info" slot="reference">
                      <span>公寓: {{ item.apartmentName }}</span>
                      <br />
                      <span>房间: {{ item.roomSex+":"+item.roomCode }}</span>
                      <br />
                      <span>类型: {{ item.roomType }}</span>
                      <br />
                      <span>状态:
                      <el-tag size="mini" :type="item.roomStatus === '满员' ? 'danger' : 'success'">{{ item.roomStatus }}</el-tag>
                    </span>
                    </div>
                  </el-popover>

<!--                </el-tooltip>-->
              </div>
            </div>
          </el-card>
        </div>
      </el-col>


      <!--      <el-col class="card-container" :span="2" v-for="(item) in roomList" :key="item.roomId" :offset="0" >-->
<!--        <div class="card-container">-->
<!--          <el-card :body-style="{ padding: '0px'}" shadow="hover">-->
<!--            <div class="e-info">-->
<!--              <i>公寓:{{item.apartmentName}}</i><br>-->
<!--              <i>房间:{{item.roomCode}}</i><br>-->
<!--              <i>入住状态:{{item.roomStatus}}</i>-->
<!--              <div class="bed_info">-->
<!--                <el-tooltip placement="top">-->
<!--                  <div slot="content" class="bed_info_butten">-->
<!--                    <ul v-for="(rel, key) in item.elder" :key="key">-->
<!--                      <i>{{ rel.bedCode }}:{{rel.elderName}}</i>-->
<!--                    </ul>-->
<!--                  </div>-->
<!--                  <el-button size="mini">床位情况</el-button>-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </div>-->
<!--      </el-col>-->
    </div>
  </div>
</template>

<script>
  import {getDictInfo, getRoomAllInfo, getRoomPrice} from "@/api/business/roomInfo";
  import {getElderApartment} from "@/api/business/elderInfo";

  export default {
    data() {
      return {
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          apartmentId: null,
          roomId: null,
          roomCode: null,
          roomType: null,
          roomStatus: null,
        },
        roomList:{},
        apartmentList:{},
        roomPriceList:{},
      }
    },
    created() {
      this.getRoomInfo();
      this.getApartmentAllInfo();
      this.getApartmentDictInfo();
    },
    methods:{
      //获取房间价格
      getRoomPrice(){
        getRoomPrice().then(response =>{
          this.roomPriceList = response.rows
        })
      },
      getApartmentDictInfo(){
        getDictInfo().then(response=>{
          response.data.reduce((result,item) =>{
            result[item.superCode] = item.dictInfo;
            return result;
          })
        })
      },
      getApartmentAllInfo(){
        getElderApartment().then(response =>{
          this.apartmentList = response.rows;
        })
      },
      getRoomInfo(){
        getRoomAllInfo(this.queryParams).then(response =>{
          this.roomList = response.data;
          this.roomList.forEach(item =>{
            item.flipped = false;
          })
          console.log(this.roomList);
        })
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getRoomInfo();
      },
    }
  }
</script>
<style scoped>
  /*.card-container .el-card.flip {*/
  /*  transition: all 1s;*/
  /*  transform: rotateY(180deg);*/
  /*}*/
  /*.e-info{*/
  /*  text-align: center;*/
  /*  border-radius: 10px; !* 圆角 *!*/
  /*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* 阴影 *!*/
  /*  background: #c6b0d5;*/
  /*  font-size: 10px;*/
  /*  width: 100px;*/
  /*  height: 100px;*/
  /*  color: #1f2325;*/
  /*  padding-top: 3px;*/
  /*}*/
  /*.card-container{*/
  /*  border-radius: 10px; !* 圆角 *!*/
  /*  width: 100px;*/
  /*  height: 100px;*/
  /*}*/
  /*.bed_info{*/
  /*  text-align: center;*/
  /*  background: #8dcae7;*/
  /*}*/
  /*.bed_info_butten{*/
  /*  width: 150px;*/
  /*  background: #b8dcd4;*/
  /*}*/

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #77c1fd;
    background: #f5ebb7;
    background: linear-gradient(to right, #c0d6e3, #b0eeca);
    color: #000000; /* 黑色字体 */
    font-family: Arial, sans-serif;
    font-size: 13px;
    width: 150px;
    height: 150px;
    border-radius: 10px;
  }

  .card-content {
    display: flex;
    flex-direction: column;
  }

  .info {
    text-align: left;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }

  .bed-info {
    margin-top: 10px;
  }

  .bed-info-content {
    padding: 8px;
    width: 150px;
  }
  .el-tooltip__popper {
    background-color: #f5f5f5; /* 背景颜色 */
    border-radius: 4px; /* 边框圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 10px; /* 内边距 */
    font-size: 14px; /* 字体大小 */
    color: #333333; /* 字体颜色 */
  }



  /*.card-container {*/
  /*  display: flex;*/
  /*  width: 1200px;*/
  /*  height: 700px;*/
  /*  justify-content: center;*/
  /*  flex-wrap: wrap;*/
  /*  margin: auto auto;*/

  /*}*/

  /*.card {*/
  /*  width: 200px;*/
  /*  height: 300px;*/
  /*  margin: 10px;*/
  /*  perspective: 1000px;*/
  /*  cursor: pointer;*/
  /*  transition: transform 0.6s;*/

  /*}*/


  /*.flipped .front {*/
  /*  transform: rotateY(180deg);*/
  /*}*/

  /*.flipped .back {*/
  /*  transform: rotateY(0deg);*/
  /*}*/

  /*.front,*/
  /*.back {*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  position: absolute;*/
  /*  backface-visibility: hidden;*/
  /*  border-radius: 10px;*/
  /*  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;*/
  /*}*/

  /*.front {*/
  /*  background-color: #3498db;*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*  align-items: center;*/
  /*  transform: rotateY(0deg);*/
  /*  transition: transform 0.6s;*/
  /*}*/

  /*.back {*/
  /*  background-color: #e74c3c;*/
  /*  display: flex;*/
  /*  justify-content: center;*/
  /*  align-items: center;*/
  /*  transform: rotateY(-180deg);*/
  /*  transition: transform 0.6s;*/
  /*}*/

  /*.buttongroup {*/
  /*  margin: auto auto;*/
  /*}*/

  /*.button {*/
  /*  display: inline-block;*/
  /*  border-radius: 4px;*/
  /*  background-color: #9D9Def;*/
  /*  border: none;*/
  /*  color: #FFFFFF;*/
  /*  text-align: center;*/
  /*  font-size: 28px;*/
  /*  padding: 20px;*/
  /*  width: 200px;*/
  /*  transition: all 0.5s;*/
  /*  cursor: pointer;*/
  /*  margin: 5px;*/
  /*  vertical-align: middle;*/
  /*}*/

  /*.button span {*/
  /*  cursor: pointer;*/
  /*  display: inline-block;*/
  /*  position: relative;*/
  /*  transition: 0.5s;*/
  /*}*/

  /*.button span:after {*/
  /*  content: '»';*/
  /*  position: absolute;*/
  /*  opacity: 0;*/
  /*  top: 0;*/
  /*  right: -20px;*/
  /*  transition: 0.5s;*/
  /*}*/

  /*.button:hover span {*/
  /*  padding-right: 25px;*/
  /*}*/

  /*.button:hover span:after {*/
  /*  opacity: 1;*/
  /*  right: 0;*/
  /*}*/
</style>

